<template>
	<!-- 有上门时间 日期 上传图片 -->
	<view class="releaseOrder">
		<view class="top">
			<image class="top-img" :src="$wanlshop.oss(orderData.image)" mode=""></image>
			<view class="top-titile flex_sb">
				<view class="f32 fb c3d">
					{{orderData.title}}
				</view>
				<view class="f28 fb cf64">
					￥{{orderData.price}}
				</view>
			</view>
		</view>

		<view class="content">
			<view class="address cu-list menu-avatar  radius-bock ">
				<view class="cu-item">
					<view class="cu-avatar round wanl-bg-orange"><text class="wlIcon-weizhi1"></text></view>
					<view class="content" v-if="addressData.address" @tap="userAddress()">
						<view>
							<text class="wanl-pip margin-right-sm">{{ addressData.name }}</text>
							<text class="wanl-gray-light text-sm">{{ addressData.mobile }}</text>
						</view>
						<view class="text-sm wanl-pip text-cut">{{ addressData.province}} {{ addressData.city }}
							{{ addressData.district }} {{ addressData.address }}
						</view>
					</view>
					<view class="content" @tap="addAddress('newadd')" v-else>
						<view class="text-sm wanl-pip text-cut">点击此处填写收货地址</view>
					</view>
					<view class="action"><text class="wlIcon-fanhui2 text-lg"></text></view>
				</view>
			</view>
			<view class="smsj radius-bock mt32 flex_sb">
				<view class="f28 fb c3d">
					上门日期
				</view>
				<view class="info fb" @click="showCalendar = true">
					{{times.day ? times.day :'请选择上门日期'}}
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="smsj radius-bock mt12 flex_sb">
				<view class="f28 fb c3d">
					上门时间
				</view>
				<view class="info fb" @click="timeslotOpen">
					{{times.hour ? times.hour :'请选择上门时间'}}
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="smsj radius-bock mt32">
				<view class="f28 c3d fb">
					装修安装产品/环境
				</view>
				<view class="f24 c6">
					（请上传真实、完整、清晰的图片或视频）
				</view>
				<!-- 上传视频或者图片 -->
				<view class="mt12">
					图片（最多6张图片）
				</view>
				<view class="up-page mt20">
					<!--图片-->
					<view class="show-box" v-for="(item,index) in imageList" :key="index">
						<image class="full" :src="$wanlshop.oss(item)" @tap="previewImage(index)" mode="widthFix">
						</image>
						<view class="delect-icon" @click="delect(index)">
							<image class="full" src="https://img.aibbyp.com/wechat/images/nHome/close.png" mode="">
							</image>
						</view>
					</view>

					<!-- #ifdef APP -->
					<view v-if="VideoOfImagesShow" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')" class="mb16 box-mode">
						<image class="full" src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png" mode=""></image>
					</view>
					<!-- #endif -->
					<!-- #ifndef APP -->
					<view v-if="VideoOfImagesShow" @tap.stop="chooseVideoImage('img')" class="mb16 box-mode">
						<image class="full" src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png" mode=""></image>
					</view>
					<!-- #endif -->
				</view>
				<view class="mt12">
					视屏（最多一个视屏:120秒）
				</view>
				<view class="up-page mt20">

					<!--视频-->
					<view class="show-box" v-if="videoList">
						<video class="full" :src="$wanlshop.oss(videoList)"></video>
						<view class="delect-icon" @tap="delectVideo(index1)">
							<image class="full" src="https://img.aibbyp.com/wechat/images/nHome/close.png" mode="">
							</image>
						</view>
					</view>
					<!-- #ifdef APP -->
					<view v-if="VideoOfImagesShow" @tap.stop="openAuth('WRITE_EXTERNAL_STORAGE')" class="mb16 box-mode">
						<image class="full" src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png" mode=""></image>
					</view>
					<!-- #endif -->
					<!-- #ifndef APP -->
					<view v-if="VideoOfImagesShow" @tap.stop="chooseVideoImage('video')" class="mb16 box-mode">
						<image class="full" src="https://img.aibbyp.com/wechat/images/nHome/tpsc.png" mode=""></image>
					</view>
					<!-- #endif -->
				</view>

				<view class="f28 c3d fb mt20">
					详细描述
				</view>

				<u-input type="textarea" v-model="valueInput" height='100'></u-input>
			</view>
		</view>
		<image class="imgxqt mt20" src="https://img.aibbyp.com/wechatUser/category1/xqt.png" mode=""></image>
		<timeSlot ref="timeslot" :title="'选择时间段'" @confirm="confirmTimeSlot">
		</timeSlot>
		<u-calendar v-model="showCalendar" max-date='2050' :min-date='minData()' :safe-area-inset-bottom='true'
			mode="range" @change="changeCalendar"></u-calendar>
		<view class="btnSub mt20">
			<button class="btn" @click="submit" :loading="btnLoading">发布订单</button>
		</view>

	</view>
</template>

<script>
	import timeSlot from "@/components/wanghexu-timeslot/wanghexu-timeslot.vue"
	export default {
		components: {
			timeSlot
		},
		data() {
			return {

				btnLoading: false,
				videoList: null,
				imageList: [],
				VideoOfImagesShow: true, // 页面图片或视频数量超出后，拍照按钮隐藏
				showCalendar: false,
				orderData: {},
				addressData: {},
				valueInput: '',
				multipart: null,
				uploadurl: null,
				info: {
					avatar: '',
				},
				times: {
					day: '',
					hour: "",
					dayparmas: {}
				},
			}
		},
		onLoad(option) {
			this.getMultipart()
			this.userScore()
			this.loadData(null, option.category_id)
		},
		methods: {
			submit() {

				let data = {
					door_date: `${this.times.dayparmas.startDate}~${this.times.dayparmas.endDate}`,
					door_time: `${this.times.dayparmas.starthour}~${this.times.dayparmas.endhour}`,
					goods_images: this.imageList,
					goods_videos: [this.videoList],
					describe: this.valueInput,
					price: this.orderData.price,
					address_id: this.addressData.id,
					goods_id: this.orderData.id
				}
				console.log(data);
				this.$api.post({
					url: '/worker/order/addOrder',
					data: data,
					loadingTip: '发布中',
					success: res => {
						uni.showModal({
							title: '发布成功',
							content: '待师傅接单（在我的预约中可查看订单）',
						})
					}
				})

			},
			minData() {
				const today = new Date();

				// 获取年、月、日（注意月份需要 +1）
				const year = today.getFullYear();
				const month = String(today.getMonth() + 1).padStart(2, '0'); // 补零操作
				const day = String(today.getDate()).padStart(2, '0');

				// 拼接成目标格式
				const formattedDate = `${year}-${month}-${day}`;
				return formattedDate
			},
			//点击上传图片或视频
			chooseVideoImage(key) {
				if (key == 'img') {
					this.chooseImages();
				} else {
					this.chooseVideo();
				}
			},
			//上传图片
			chooseImages() {
				uni.chooseImage({
					count: 6, //允许选择的数量
					success: res => {
						console.log(res);
						for (let i in res.tempFilePaths) {
							this.myUpload(res.tempFilePaths[i], 'image')
						}
						// this.imageList = this.imageList.concat(res.tempFilePaths);
						//console.log(this.imageList)


					}
				})
			},
			//上传视频
			chooseVideo(index) {

				uni.chooseVideo({
					maxDuration: 120, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: 1,
					success: res => {
						this.myUpload(res.tempFilePath, 'video')
						return

						console.log(this.videoList);
					}
				})
			},
			//预览图片
			previewImage: function(e) {
				let urls = this.imageList.map(a => this.$wanlshop.oss(a))
				uni.previewImage({
					current: e,
					urls: urls
				});
			},
			// 获取上传限制
			getMultipart() {
				this.$api.get({
					url: '/wanlshop/common/uploadData',
				}).then(res => {
					this.multipart = res.storage == 'local' ? null : res.multipart
					this.uploadurl = res.uploadurl
				})
			},
			// 上传到线上
			myUpload(filePath, type) {
				uni.showLoading({
					title: '上传中...'
				})
				this.$api.upload({
					url: this.uploadurl,
					filePath: filePath,
					name: 'file',
					formData: this.multipart,
				}).then(res => {
					console.log('成功', res);
					uni.hideLoading()
					// 视频图片
					if (type == 'video') {
						this.videoList = res.url
						this.info.type = 'video'
						return
					}
					if (type == 'image') {
						if (this.imageList.length == 6) return
						this.imageList.push(res.url)
						this.info.type = 'image'
						return
					}
					// this.videoList = this.videoList.concat(res.tempFilePath);

				}).catch(res => {
					uni.hideLoading()
				})
			},
			delect(index) {
				uni.showModal({
					title: '提示',
					content: '是否要删除该图片',
					success: res => {
						if (res.confirm) {
							this.imageList.splice(index, 1);
						}

					}
				});
			},
			confirmTimeSlot(i, k) {

				var time = `${i.start.hour}:${i.start.min}~${i.end.hour}:${i.end.min}`
				this.times.hour = time
				this.times.dayparmas.starthour = `${i.start.hour}:${i.start.min}`
				this.times.dayparmas.endhour = `${i.end.hour}:${i.end.min}`
				console.log(time);
			},
			timeslotOpen() {
				this.$refs.timeslot.open()
			},
			changeCalendar(i) {
				this.times.day = `${i.startDate}~${i.endDate}`
				this.times.dayparmas.startDate = i.startDate
				this.times.dayparmas.endDate = i.endDate
				if (this.times.hour) return
				this.timeslotOpen()
			},
			loadData(type, address_id) {
				console.log(address_id);
				return
				this.$api.post({
					url: '/worker/goods/detail',
					loadingTip: '加载中',
					data: {
						id: address_id,
						address_id: null,
					},
					success: res => {
						if (res.info) {
							this.userAddress();
						} else {
							this.orderData = res.goods;
							if (res.address) {
								this.addressData = res.address;
							}
						}
					}
				});
			},

			userScore() {
				this.$api.get({
					url: "/jmy/user/score",
					data: {},
					success: res => {
						this.userInfo = res
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.btnSub {
		padding-bottom: env(safe-area-inset-bottom);
		width: 100vw;
		height: 98rpx;
		position: sticky;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		z-index: 2;

		.btn::after {
			border: none;
		}

		.btn {
			width: 600rpx;
			height: 62rpx;
			background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;

			button {
				background: linear-gradient(264deg, #3065FA 0%, #3065FA 14%, #2D8DF4 99%);
			}
		}
	}

	.releaseOrder {
		.top {
			width: 100%;
			height: 490rpx;
			position: relative;

			.top-img {
				position: absolute;
				top: 0;
				width: 100%;
				height: 416rpx;
			}

			.top-titile {
				width: 100%;
				position: absolute;
				bottom: 0;
				background: #fff;
				padding: 36rpx 46rpx;
				border-radius: 34rpx 34rpx 0 0;
			}
		}

		.content {
			padding: 20rpx 24rpx;

			.smsj {
				background: #fff;
				padding: 30rpx 20rpx;
			}
		}


		.full {
			width: 100%;
			height: 100%;
		}

		.grid.grid-square .bg-img {
			margin: unset;
			border-radius: 12rpx;
		}

		.up-page {
			display: flex;
			flex-wrap: wrap;
			display: flex;
			width: 100%;

			.show-box:nth-child(3n) {
				margin-right: 0;
			}

			.box-mode {
				width: 27vw;
				height: 27vw;

				border-radius: 8rpx;
				overflow: hidden;
			}

			.show-box {
				position: relative;
				margin-bottom: 16rpx;
				margin-right: 16rpx;
				@extend .box-mode;

				.delect-icon {
					height: 40rpx;
					width: 40rpx;
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					z-index: 1;
				}
			}
		}

		.imgxqt {
			width: 100%;
			height: 708rpx;
		}
	}
</style>